import React, { useLayoutEffect, useState } from 'react';
import { Select } from 'antd';
import { MoonOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { useSelector, useDispatch } from 'react-redux';
import { toggleTheme } from '../../store';

import "./index.scss"

function Header() {
  const isDark = useSelector(state => state.theme.isDark);
  // 获取 dispatch 函数
  const dispatch = useDispatch();
  const { t, i18n } = useTranslation();
  const [options, setOptions] = useState([
    {
      value: 'zh',
      label: '简体中文',
    },
    {
      value: 'en',
      label: 'English',
    },
    {
      value: 'jp',
      label: 'にほんご',
    }
  ]);
  const [themeText, setThemeText] = useState(isDark ? '明亮模式' : '暗黑模式');
  useLayoutEffect(() => {
    setThemeText(isDark ? '明亮模式' : '暗黑模式');
  }, [isDark])
  function change(value) {
    i18n.changeLanguage(value);
  }
  function theme() {
    dispatch(toggleTheme());
  }
  return (
    <>
      <div className="header">
        <div className="left">
          <div className="icon">
            📦
          </div>
          <div className="title">
            {t('header.title')} v1.92
          </div>
        </div>
        <div className="right">
          <div className="status">
            <div className="light">

            </div>
            <div className="txt">
              系统运行中
            </div>
          </div>
          <div className="style" onClick={theme}>
            <div className="icon">
              <MoonOutlined />
            </div>
            <div className="txt">
              {themeText}
            </div>
          </div>
          <div className="language">
            <Select
              className='select'
              defaultValue="zh"
              variant="borderless"
              style={{ width: 120 }}
              options={options}
              onChange={change}
            />
          </div>
        </div>
      </div>
    </>
  )
}

export default Header
